<template>
  <div class="bj material">
    <el-row :gutter="20">
      <el-col :span="19">
        <!-- 右侧 -->
        <div class="material_right ml_30">
          <div class="mlr_40 mt_30">
            <!-- title -->
            <div class="dis_f pb_29 bor_bottom">
              <div class="actives ml_7"></div>
              <div class="color_333 font_18">设置头像</div>
            </div>
            <!--  -->
            <div class="setimg mt_23">
              <el-col
                :span="11"
                style="border-right:1px dashed rgba(153, 153, 153, 0.1); padding-left: 10px; padding-right: 10px;"
              >
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                  <el-button size="small" type="primary">上传照片</el-button>
                </el-upload>
                <div class="color_666 font_12 mt_10">请选择jpg.gif.png文件，大小不超过2M,尺寸不小于150*150像素</div>
                <div class="upimg mt_20"></div>
              </el-col>
              <el-col :span="13">
                <!-- title -->
                <div class="color_333 font_18"><span class="bor_bb">效果</span>预览</div>
                <div class="color_666 font_14 mt_10">您上传的头像会自动生成三个尺寸，请注意头像是否清晰。</div>
                <div class="dis_f">
                  <div class="font_14 color_666" style="margin-left:20px">
                    <div class="bigimg"></div>
                    <div class="mt_24">大尺寸150*150像素</div>
                  </div>
                  <div class="font_14 color_666" style="margin-left:23px">
                    <div class="secondaryimg"></div>
                    <div class="mt_24">中尺寸110*110像素</div>
                  </div>
                  <div class="font_14 color_666" style="margin-left:26px">
                    <div class="smallimg"></div>
                    <div class="mt_24">小尺寸40*40像素</div>
                  </div>
                </div>
              </el-col>
            </div>

            <!--  -->
          </div>
          <div>
            <button class="buttonsubmit">完成</button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {},
    beforeRemove(file, fileList) {}
  }
};
</script>

<style scoped lang='less'>
.bor_bb{
  border-bottom: 3px solid #27A4FE ;
}
.mt_24 {
  margin-top: 24px;
}
.bigimg {
  width: 150px;
  height: 150px;
  background: rgba(245, 245, 245, 1);
  border: 1px solid rgba(193, 193, 193, 0.5);

  margin-top: 66px;
  border-radius: 50%;
}
.secondaryimg {
  margin: auto;
  width: 110px;
  height: 110px;
  background: rgba(245, 245, 245, 1);
  border: 1px solid rgba(193, 193, 193, 1);
  opacity: 0.5;
  border-radius: 50%;
  margin-top: 106px;
}
.smallimg {
  margin: auto;
  width: 40px;
  height: 40px;
  background: rgba(245, 245, 245, 1);
  border: 1px solid rgba(193, 193, 193, 1);
  opacity: 0.5;
  border-radius: 50%;
  margin-top: 176px;
}
.upimg {
  width: 358px;
  height: 214px;
  background: rgba(245, 245, 245, 1);
  border: 1px solid rgba(193, 193, 193, 0.5);
}
.mt_20 {
  margin-top: 20px;
}
.font_12 {
  font-size: 12px;
}
.mt_23 {
  margin-top: 23px;
}
.el-button--primary {
  width: 96px;
  height: 34px;
  background: #fff;
  border: 1px solid #27a4fe;
  color: #27a4fe;
}
.buttonsubmit {
  width: 76px;
  height: 34px;
  background: rgba(39, 164, 254, 1);
  color: #fff;
  margin-top: 40px;
  border: none;

  margin-left: 442px;
}
.password_title {
  width: 100px;
}
.password {
  width: 299px;
  margin: auto;
}
.color_F1616 {
  color: #ff1616;
}
.ml_10 {
  margin-left: 10px;
}
.color_999 {
  color: #999;
}
.ml_23 {
  margin-left: 23px;
}
.ml {
  margin-left: 10px;
}
.color {
  color: #27a4fe;
}
.font_14 {
  font-size: 14px;
}
.color_666 {
  color: #666;
}
.bj {
  background: #f3f3f3;
  overflow: hidden;
  padding-bottom: 34px;
}
.mt_30 {
  margin-top: 30px;
}
.material_left {
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.portrait_images {
  width: 74px;
  height: 85px;
  margin: auto;
  border: 1px solid;
  margin-top: 30px;
}
.telephone {
  font-size: 16px;
  color: #444343;
  margin-top: 17px;
  text-align: center;
}
.text {
  color: #999;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.edit_img {
  text-align: center;
  padding-top: 11px;
}
.el-menu-item.is-active {
  color: #27a4fe;
  border-left: 2px solid #27a4fe;
  background: rgba(39, 164, 254, 0.1);
}
.ml_7 {
  margin-right: 7px;
}
.mt_50 {
  margin-top: 50px;
}
.el-menu-item {
  text-align: center;
}
.material_right {
  width: 957px;
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.mlr_40 {
  margin-left: 40px;
  margin-right: 40px;
}
.actives {
  width: 4px;
  height: 18px;
  background: rgba(39, 164, 254, 1);
  margin-top: 4px;
}
.dis_f {
  display: flex;
}
.pb_29 {
  padding-bottom: 29px;
}
.bor_bottom {
  border-bottom: 1px dashed rgba(153, 153, 153, 0.1);
}
.color_333 {
  color: #333;
}
.font_18 {
  font-size: 18px;
}
.font_16 {
  font-size: 16px;
}
.dis_f_j_b {
  display: flex;
  justify-content: space-between;
}
.mt_38 {
  margin-top: 30px;
}
.mt_10 {
  margin-top: 10px;
}
.ma_button {
  width: 88px;
  height: 34px;
  border: 1px solid rgba(39, 164, 254, 1);
  color: #27a4fe;
  line-height: 34px;
  text-align: center;
}
</style>